<template>
  <div class="txt-row-root">
    <div class="row-container" v-for="(item,index) in txtConfig" :key="index">
      <div class="txt-item flex-row" :style="getStyle(item,cIndex)" v-for="(cItem,cIndex) in item"
           :key="`${index}_${cIndex}`">
        <div class="label">
          {{ cItem.label }}：
        </div>
        <div class="value">
          {{ (data || {})[cItem.value] }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {isArr} from "@/utils/arrayUtil";

export default {
  props: {
    txtConfig: {
      type: Array
    },
    data: {
      type: Object
    }
  },
  computed: {
    maxLength() {
      let {txtConfig} = this
      if (!isArr(txtConfig)) return null;
      return _.max(_.map(txtConfig, item => item.length));
    }
  },
  methods: {
    getStyle(item, cIndex) {
      let {maxLength} = this;
      let width = `0px`;
      if (!maxLength) return {width};
      if (item.length == maxLength) return {width: `${100 / maxLength}%`}
      return cIndex === item.length-1 ? {width: `${100 - 100 / maxLength * (item.length-1)}%`} : {width: `${100 / maxLength}%`}
    }
  }
}
</script>

<style lang="scss" scoped>
.row-container {
  padding-left: 15px;
  align-items: center;
  display: flex;
  margin-bottom: 16px;

  .txt-item {
    //margin-right: 220px;
    display: flex;

    &:last-child {
      margin-right: 0;
    }

    .label {
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 1px;
      color: rgba(144, 147, 153, 1);
      text-align: right;
      vertical-align: top;
      //      width: 80px;
      //display: flex;
      //      justify-content: flex-start;
      min-width: max-content;
    }

    .value {
      position: relative;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 1px;
      color: rgba(144, 147, 153, 1);
    }
  }
}
</style>
